<template>
  <view>
    <!-- 先弹出动画 -->
    <activity-action :step="step" :showTurntable="showTurntable" v-if="isShow" @close="(showActiveModel = true), (isShow = false)" />
    <!--显示GOP配置的广告弹窗 -->
    <template v-if="giftActivitySwitch.midAutumnGift">
      <template v-if="[0, 1].includes(step)">
        <activity-modal v-model="showActiveModel" :title="title" :position="position" @close="showActiveModel = false" :params="params" />
      </template>
      <template v-else>
        <activity-action-order v-model="showActiveModel" :saleId="saleId" />
      </template>
    </template>
  </view>
</template>
<script>
import { mapState } from "vuex";
import activityModal from "@/components/activityModal/activityModal.vue";
import activityAction from "@/components/activityAction/activityAction.vue";
import activityActionOrder from "@/components/activityActionOrder/activityActionOrder.vue";

export default {
  components: { activityAction, activityModal, activityActionOrder },
  props: {
    position: {
      type: [Number, String],
    },
    step: {
      type: Number,
      default: 0,
    },
    //  给提交订单后收银台用
    saleId: {
      type: [Number, String],
    },
    showTurntable: {
      type: Boolean,
      default: true,
    },
    params: {
      type: Object,
      default: { inviteUserId: "" },
    },
  },
  computed: {
    ...mapState(["giftActivitySwitch"]),
    title() {
      if ([22, "22"].includes(this.position)) {
        return "注册成功";
      }
      if ([23, "23"].includes(this.position)) {
        return "认证成功";
      }
      return "";
    },
  },

  data() {
    return {
      isShow: true,
      showActiveModel: false,
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.footer {
  color: rgba(0, 0, 0, 0.45);
  height: 194px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  > p:first-child {
    font-size: 14px;
    span {
      margin-right: 24px;
    }
    & > span:last-child {
      margin: 0;
    }
  }
  > p:last-child {
    font-size: 12px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    span:nth-child(2) {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 50px;
      border: 1px solid rgba(0, 0, 0, 0.45);
      margin: 0 5px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
